@use "sass:color";
@charset "UTF-8";
// Copyright (C) 2019 Checkmk GmbH - License: GNU General Public License v2
// This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
// conditions defined in the file COPYING, which is part of this source code package.

// Note: Some of the colors defined here are also used in cmk/gui/plugins/metrics/utils.py, do not
// change one without the other.

@import "../../facelift/colors.scss";
// -----------------------------------------------------------------------------
// Colors
// -----------------------------------------------------------------------------
$yellow: rgb(255, 215, 3); // yellow

// Helper variables for this theme that should be used in all color definitions below
$ux-theme-0: rgb(17, 24, 29);
$ux-theme-1: rgb(28, 34, 40);
$ux-theme-2: rgb(32, 39, 46);
$ux-theme-3: rgb(38, 47, 56);
$ux-theme-4: rgb(38, 45, 52);
$ux-theme-5: rgb(48, 57, 70);
$ux-theme-6: rgb(53, 63, 74);

// UX colors
$navbar-color: $ux-theme-0;
$bg-color: $ux-theme-1;
$bg-color-secondary: $ux-theme-2;
$base-color: $ux-theme-2;
$headline-color: $ux-theme-3;
$table-highlight-color: $ux-theme-4;
$line-color: $ux-theme-5;

// -----------------------------------------------------------------------------
// Fonts
// -----------------------------------------------------------------------------
$font-color: $white;
$font-color-dimmed: rgba($white, 0.5);
$font-color-light-bg: $grey-6;
$font-color-light-grey: $midgrey;
$font-color-green: $success;
$font-color-orange: $orange-1;

// -----------------------------------------------------------------------------
// Form elements (input, textarea, button, etc.)
// -----------------------------------------------------------------------------
$default-button-border-color: $ux-theme-5;
$default-submit-button-border-color: color.adjust($success, $lightness: -25%);

$input-background-color: $ux-theme-5;
$input-hover-bg-color: $ux-theme-4;
$input-nested-background-color: rgb(63, 75, 93);
$input-dropdown-border-color: $ux-theme-6;

// -----------------------------------------------------------------------------
// States
// -----------------------------------------------------------------------------
$color-state-1-background: $yellow;
$color-state-2-background: rgb(200, 50, 50);
$color-state-3-background: rgb(255, 132, 0);
$color-state-4-background: $darkgrey;
$color-state-5-background: rgb(72, 203, 240);
$color-state-6-background: rgb(185, 236, 250);
$color-state-7-background: rgb(233, 128, 110);
$color-state-8-background: rgb(241, 174, 162);
$color-state-9-background: rgb(191, 90, 191);
$color-state-success-background: $success; // green
$color-state-running-background: $hostdown;

// -----------------------------------------------------------------------------
// Tables
// -----------------------------------------------------------------------------
$color-table-border: $grey-6; // grey
$color-table-background: $grey-5; // light grey
$color-table-border-dark: $grey-6; // dark grey

// -----------------------------------------------------------------------------
// Temporary variables for implementing the dark theme
// These should be put into a more intuitive naming structure afterwards.
// -----------------------------------------------------------------------------
$dashboard-stats-bg-color: transparent;

$data-container-bg-color: $ux-theme-2;

$input-button-bg-color: $ux-theme-0;
$input-button-hover-bg-color: $ux-theme-6;

$odd-tr-bg-color: $ux-theme-2;
$even-tr-bg-color: $ux-theme-4;

$floatfilter-bg-color: null;

$dashlet-body-bg-color: $ux-theme-2;

$td-gap-bg-color: $ux-theme-2;

$td-text-overflow: ellipsis;

$graph-legend-th-border-bottom: 1px solid $grey-1;

$dashlet-stats-border-top-color: $grey-5;

$overview-info-bg: rgb(56, 59, 81);

$wato-a-border: 1px solid $grey-6;

$host-diag-success-bg-color: rgb(50, 80, 50);
$input-error-bg-color: $red-2;

$hot-bg-color: $orange-1;

$data-th-sort-hover-bg-color: null;

$h3-margin-bottom: 0;

$wato-info-margin: 0;
$wato-info-padding: 10px 0 10px 10px;

$repprogress-progress-bg-color: rgb(105, 156, 170); // darkened state6 bg color

$iconbutton-filter: invert(40%);

$popup-menu-select-bg-color: $ux-theme-1;

$dragging-bg-color: $ux-theme-1;

$nested-table-th-bg-color: $ux-theme-4;
$nested-table-td-bg-color: $ux-theme-5;
$nested-table-td-inactive-bg-color: $nested-table-td-bg-color;

$duallist-control-a-hover-bg-color: color.mix($white, $grey-5, 10%);

$performance-table-shared-padding: 8px 0;

// -----------------------------------------------------------------------------
// Tags
// -----------------------------------------------------------------------------
$tag-opacity: 0.6;
$tag-discovered-opacity: 0.7;
$tag-hover-opacity: 0.8;

// -----------------------------------------------------------------------------
// Node visualization
// -----------------------------------------------------------------------------
$node-vis-darkgrey: $ux-theme-5;
$node-vis-menu-bg-color: $ux-theme-1;
$node-vis-history-bg-color: $grey-1;
$node-vis-history-border-color: $grey-1;
$node-vis-history-filter: invert(70%);

$agent-config-inner-title-bg-color: $ux-theme-1;

$matches-search-bg-color: $success-dimmed;

$help-bg-color: $navbar-color;
$help-icon-bg-color: rgb(6, 103, 193);
$help-tt-font-color: $grey-2;

$timeline-hilite-border: 2px solid $midgrey;
$timetable-hilite-bg-color: color.adjust($ux-theme-1, $lightness: 15%);

$graph-hover-popup-bg-color: $ux-theme-2;
$graph-hover-popup-border: 1px solid $grey-3;
$graph-hover-popup-box-shadow: none;

$dashlet-inner-bg-color: $ux-theme-2;

$bar-fill-color: rgb(60, 194, 255);
$bar-hover-fill-color: rgb(60, 194, 255);
$barbar-fill-color: rgb(14, 58, 99);
$barbar-hover-fill-color: rgb(14, 58, 99);

$dc-graph-color-0: $success;
$scatterdot-hilite-color: $yellow;

/* TODO:  move variables defined for the UX project to the correct place */
$popup-shadow-color: rgba($black, 0.1);
$button-bg-color-default: $ux-theme-6;
$button-bg-color-suggestions: $ux-theme-0;
$navigation-bg-color: $ux-theme-0;
$page-menu-bg-color: $ux-theme-0;
$snapin-bg-color: $ux-theme-0;
$sidebar-border-color: $ux-theme-3;
$popup-trigger-active-bg-color: $color-midnight-grey-90;
$tactical-overview-td-bg-color: $ux-theme-6;
$server-time-div-bg-color: $ux-theme-6;
$snapin-heading-border-color: rgba($white, 0.2);
$simplebar-scrollbar-color: $ux-theme-6;
$popup-border: $popup-border-width solid $success;
$popup-inner-border: 1px solid $ux-theme-3;
$filter-add-button-hover-brightness: brightness(100);
$floatfilter-legend-border: 1px solid rgba($white, 0.2);
$log-output-color: $ux-theme-0;
$dashlet-editor-controls-color: rgb(78, 93, 105);
$dark-image-invert: invert(100%);
$ntop-protocol-painter-padding-top: 4px;
// =============================
// The main dashboard shows the hosts and services stats dashlets right next to the total host and
// service problems graphs. Therefore, we should keep the colors in sync.
// metrics counterpart: cmk_hosts_down, cmk_services_critical
$hexagon-critical-color: $danger;
// metrics counterpart: cmk_hosts_unreachable, cmk_services_unknown
$hexagon-unknown-color: rgb(255, 136, 0);
// metrics counterpart: cmk_hosts_in_downtime, cmk_services_in_downtime
$hexagon-downtime-color: rgb(60, 194, 255);
// metrics counterpart: cmk_services_on_down_hosts
$hexagon-host-down-color: rgb(16, 99, 176);
// =============================
$hexagon-empty-color: $white;
$hexagon-empty-fill-opacity: 0.03;
$hexagon-empty-stroke-color: $white;
$hexagon-empty-stroke-opacity: 0.1;
$host-hexagon-ok-stroke-color: rgb(58, 69, 80);
$bi-box-border-color: $darkgrey;
$icons-popup-active-color: $darkgrey;
$dashlet-figures-grid-color: rgb(128, 151, 177);
$scatterplot-hilite-color: rgb(70, 130, 180);
$gauge-span-color: $ux-theme-5;
$gauge-single-value-color: $font-color;
$inactive-opacity: 0.6;
$svg-color-green-filter: invert(59%) sepia(94%) saturate(420%) hue-rotate(104deg) brightness(95%)
  contrast(87%);
